<template>
	<view class="container">
		<view class="userBox">
			<image :src="domain + userinfo.avatar" mode="aspectFill" class="avatar"></image>
			<view class="name">{{userinfo.nickname}}</view>
		</view>
		<view class="upgradeBox">
			<view class="levelBox">
				<view class="title">会员升级</view>
				<view class="lev">当前等级：<text>{{userinfo.level}}</text>级</view>
				<view class="lev" v-if="userinfo.level < userinfo.highest_level">下一等级：<text>{{userinfo.level + 1}}</text>级</view>
				<view class="read" v-if="userinfo.is_apply != 1 && userinfo.level < userinfo.highest_level">
					<checkbox-group @change="changeChecked">
						<label>
							<checkbox :checked="isChecked" value="1" color="#4EB0FF" style="transform:scale(0.7);position: relative;top: -3rpx;" />
							已阅读并同意
						</label>
					</checkbox-group>
					<text @click="seeAgreement('upgrade')">《升级规则协议》</text>
				</view>
			</view>
			<template v-if="userinfo.level < userinfo.highest_level">
				<button class="upgradeBtn" v-if="userinfo.is_apply == 1" @click="routerLogs('/pages/user/applylogs')">正在升级中...</button>
				<button class="primary apply" @tap="applyUpgrade()" v-else>申请升级</button>
			</template>
			<button class="applyBtn" @click="routerLogs('/pages/user/applylogs')">查看申请记录</button>
			<button class="authBtn" @click="routerLogs('/pages/user/authlogs')">查看审核记录</button>
		</view>
		<view class="ruleBox">
			<view class="title">规则说明</view>
			<view class="domHtml" v-html="ruleMsg"></view>
		</view>
	</view>
</template>

<script>
	import common from '@/static/js/common.js';
	export default {
		data() {
			return {
				domain: getApp().globalData.DOMAIN,
				userinfo: {},
				isChecked: false,
				ruleMsg: ''
			}
		},
		onShow() {
			this.getUserMsgInfo()
		},
		methods: {
			changeChecked(e) {
				if (e.detail.value.length > 0) {
					this.isChecked = true
				} else {
					this.isChecked = false
				}
			},
			getUserMsgInfo() {
				let that = this;
				common.api({
					method: 'GET',
					url: '/mobile/user/index',
					success:(res) => {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						that.userinfo = res.data
					}
				});
				common.api({
					method: 'GET',
					url: '/mobile/index/agreement',
					data: {code: 'rule'},
					success: function(result) {
						if (result.code != 0) {
							uni.showToast({ title: result.msg, icon: 'none' });
							return false;
						}
						that.ruleMsg = result.data.content;
					}
				});
			},
			applyUpgrade () {
				if (!this.isChecked) {
					uni.showToast({ title: '请先阅读并勾选协议', icon: 'none' });
					return false
				}
				if (this.userinfo.wechat == '') {
					uni.showModal({
						title: '温馨提示',
						content: '请先完善会员资料',
						confirmText: '完善资料',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({url: '/pages/user/setting'})
							}
						}
					});
				} else {
					let that = this;
					uni.showModal({
						title: '温馨提示',
						content: '您确认申请等级升级',
						confirmText: '确认申请',
						success: function (res) {
							if (res.confirm) {
								common.api({
									method: 'POST',
									url: '/mobile/index/apply',
									success:(res) => {
										if (res.code != 0) {
											uni.showToast({ title: res.msg, icon: 'none' });
											return false;
										}
										that.getUserMsgInfo()
										uni.showToast({ title: '申请成功，请耐心等待审核', icon: 'none' });
									}
								});
							}
						}
					});
				}
			},
			seeAgreement(type) {
				uni.navigateTo({url:'/pages/other/agreement?type='+type})
			},
			routerLogs(url) {
				uni.navigateTo({url:url})
			}
		}
	}
</script>

<style scoped lang="less">
	.container {
		background: url(@/static/image/bg-1.jpg) no-repeat center top;
		background-size: 100% auto;
	}
	.userBox {
		height: 240rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 50rpx 0;
		color: #fff;
		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
		.name {
			font-size: 35rpx;
			font-weight: bolder;
			margin-top: 20rpx;
		}
	}
	.upgradeBox {
		width: 80vw;
		border-bottom: 2rpx solid #ddd;
		padding: 0 10vw 50rpx;
		.levelBox {
			background-color: #fff;
			border-radius: 20rpx;
			text-align: center;
			padding: 30rpx 0;
			box-shadow: 0 0 10rpx rgba(0,0,0,.15);
			.title {
				font-size: 36rpx;
				font-weight: bolder;
				margin-bottom: 20rpx;
			}
			.lev {
				line-height: 2;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					font-weight: bolder;
					font-size: 36rpx;
					margin-right: 10rpx;
				}
			}
		}
		.read {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #999;
			text {
				color: #000;
				position: relative;
				top: -5rpx;
			}
		}
		.apply,.upgradeBtn,.applyBtn {
			margin-top: 60rpx;
		}
		.authBtn {
			margin-top: 20rpx;
		}
	}
	.ruleBox {
		padding: 30rpx;
		.title {
			text-align: center;
			font-size: 36rpx;
		}
	}
</style>
